<script setup lang="ts">

const props = defineProps<{
    avatar: string,
    name: string
}>()
</script>

<template>
    <div class="user">
        <div class="user-avatar" :style="{'--user-avatar': `url(${props.avatar})`}"></div>
        <span class="user-name">{{ props.name }}</span>
    </div>
</template>

<style scoped lang="scss">
.user {
    display: flex;
    align-items: center;

    &-avatar {
        --size: 13vmin;
        width: var(--size);
        height: var(--size);
        background: var(--main-color) var(--user-avatar) no-repeat center center;
        background-size: 100% 100%;
        border-radius: 50%;
        margin-right: 3vmin;
    }

    &-name {
        font-size: var(--normal-font-size);
        font-weight: bold;
        color: var(--main-color);
    }
}
</style>